<template>
  <view class="container">
    <view class="nav-bar">
      <text class="title">网易云音乐</text>
    </view>
    <!-- 搜索框 -->
    <view class="search-box" @click="gotoSearchPage">
      <input 
        class="search-input" 
        placeholder="搜索歌曲" 
        placeholder-class="placeholder-style"
      />
    </view>
    <!-- 榜单列表 -->
    <view class="chart-list">
      <block v-for="(chart, index) in topList" :key="chart.id">
        <view class="chart-item" @click="gotoChartDetail(chart.id)">
          <view class="chart-row">
            <!-- 榜单封面图 -->
            <view class="chart-cover">
              <image 
                :src="chart.coverImgUrl || '/static/placeholder.png'" 
                mode="aspectFill"
                class="cover-image"
              />
              <text class="update-info" :style="{
                position: 'absolute', 
                bottom: '8rpx', 
                left: '8rpx', 
                color: 'white', 
                fontSize: '20rpx'
              }">{{ chart.updateFrequency }}</text>
            </view>
            <!-- 歌曲信息区域 -->
            <view class="song-info-list">
           <!--   <view class="chart-header">
                <text class="chart-title">{{ chart.name }}</text>
              </view> -->
              <view class="song-preview">
                <view 
                  v-for="(song, i) in chart.tracks.slice(0, 3)" 
                  :key="i" 
                  class="preview-item"
                >
                  <text class="rank">{{ i + 1 }}.</text>
                  <text class="song-name">{{ song.name }}</text>
                  <text class="singer">- {{ song.artist }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
    <!-- 隐私保护指引 -->
    <view class="privacy-tip">
      <text class="privacy-text">点击了解《隐私保护指引》</text>
    </view>
  </view>
</template>

<script>
import { topList } from '@/common/api.js'; // 引入封装好的接口

export default {
  data() {
    return {
      title: "网易云音乐",
      topList: []
    };
  },
  onLoad() {
    this.fetchTopList();
  },
  methods: {
    // 获取榜单数据
    async fetchTopList() {
      try {
        const res = await topList(); // 使用封装好的接口
        if (res.statusCode === 200 && res.data.code === 200) {
          this.topList = res.data.list.filter(chart => chart.tracks.length > 0)
            .map(chart => ({
              id: chart.id,
              name: chart.name,
              coverImgUrl: chart.coverImgUrl || '/static/placeholder.png',
              updateFrequency: chart.updateFrequency,
              tracks: chart.tracks.map((track, index) => ({
                id: `${chart.id}-${index + 1}`,
                name: track.first, // 歌曲名
                artist: track.second, // 歌手名
                rank: index + 1
              }))
            }));
        }
      } catch (error) {
        console.error('获取榜单数据失败:', error);
      }
    },
    // 退出登录
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('userInfo');
            uni.navigateBack();
          }
        }
      });
    },
    // 跳转榜单详情页
    gotoChartDetail(chartId) {
      uni.navigateTo({ url: `/pages/list/list?id=${chartId}` });
    },
	gotoSearchPage() {
	    uni.navigateTo({
	      url: '/pages/search/search' // 假设搜索页路径为 /pages/search/search
	    });
	  }
  }
};
</script>

<style lang="scss">
// 修改背景颜色变量为白色
$bg-color: #ffffff; 
$cover-width: 180rpx; 

.container {
  // padding: 20rpx;
  background-color: $bg-color;
}

.status-bar {
  padding: 10rpx 20rpx;
  .time {
    font-size: 24rpx;
    color: #333;
  }
}

.nav-bar {
  display: flex;
  justify-content: center; // 修改为让子元素水平居中
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
  .user-info {
    display: flex;
    align-items: center;
    gap: 10rpx;
    .username {
      color: #666;
      font-size: 24rpx;
    }
    .logout {
      color: #d43c33;
      font-size: 24rpx;
      text-decoration: underline;
    }
  }
}

.search-box {
  background: #fff;
  border-radius: 28rpx;
  margin: 20rpx 0;
  padding: 18rpx 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06);
  .search-input {
    font-size: 24rpx;
    color: #333;
  }
  .placeholder-style {
    color: #999;
  }
}

.chart-list {
  .chart-item {
    background: #fff;
    border-radius: 20rpx;
    margin: 20rpx 0;
    padding: 20rpx;
    box-shadow: 0 8rpx 16rpx rgba(0,0,0,0.04);
    transition: transform 0.2s ease;
    &:hover {
      transform: translateY(-4rpx);
    }
    .chart-row {
      display: flex;
      align-items: flex-start; 
      gap: 20rpx;
    }
    // 榜单封面图容器
    .chart-cover {
      width: $cover-width;
      height: $cover-width;
      border-radius: 12rpx;
      overflow: hidden;
      position: relative;
    }
    .cover-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    // 歌曲信息容器
    .song-info-list {
      flex: 1;
      .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        .chart-title {
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
        }
      }
      .song-preview {
        width: 100%;
        .preview-item {
          display: flex;
          align-items: center;
          // 增大歌曲之间的间隔
          margin-bottom: 30rpx; 
          gap: 10rpx;
          .rank {
            color: #d43c33;
            // 修改字体
            font-family: 'Arial', sans-serif; 
            font-size: 24rpx;
            min-width: 36rpx;
            text-align: right;
          }
          .song-name {
            color: #333;
            // 修改字体
            font-family: 'Arial', sans-serif; 
            font-size: 24rpx;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .singer {
            color: #666;
            // 修改字体
            font-family: 'Arial', sans-serif; 
            font-size: 22rpx;
          }
        }
        // 为每个榜单中的第一首歌曲添加额外的 margin-top
        .preview-item:first-child {
          margin-top: 20rpx;
        }
      }
    }
  }
}


.privacy-tip {
  padding: 20rpx;
  text-align: center;
  .privacy-text {
    font-size: 22rpx;
    color: #999;
  }
}
</style>